import React, { memo } from 'react'
import type { ReactNode } from 'react'
import { RankingHeaderWrapper } from './style'
import { useAppSelector,shallowEqualApp } from '@/store'
import {formatMonthDay} from '@/utils/HandlerFormat'
import SongOperationBar from '@/components/song-operation-bar'


interface IProps {
  children?: ReactNode
}

const RankingHeader: React.FC<IProps> = () => {
  const state = useAppSelector(state => ({
    playlist:state.ranking.playlist
  }),shallowEqualApp)
    const topInfo = state.playlist;
  return (
    <RankingHeaderWrapper>
      <div className="image">
        <img src={topInfo.coverImgUrl} alt="" />
      </div>
      <div className="info">
        <div className="title">{topInfo.name}</div>
        <div className="time">
          <i className="clock sprite_icon2"></i>
          <div>最近更新：{formatMonthDay(topInfo.updateTime)}</div>
          <div className="update-f">({"每日更新:TODO"})</div>
        </div>
        <SongOperationBar favorTitle={`(${topInfo.subscribedCount})`}
                            shareTitle={`(${topInfo.shareCount})`}
                            downloadTitle="下载"
                            commentTitle={`(${topInfo.commentCount})`}/>
      </div>
    </RankingHeaderWrapper>
  )
}

export default memo(RankingHeader)
